<template>
  <div class="Tabbar flexMode vs" @contextmenu.stop.prevent="showRmenu">
    <WinIcon />
    <div
      v-for="it in windows"
      :key="it.attrs.id"
      class="tabbar p10 flexMode vc"
      :class="[it.attrs.active ? 'active' : '']"
      @click="toggleShow(it)"
      @contextmenu.stop.prevent="e => showTabRmenu(e, it)"
      @mouseenter="hoverPage(it)"
      @mouseleave="cancelHoverPage(it)"
    >
      <div class="fs20 flexMode vc">
        <Icon :meta="it.meta" />
      </div>
      <span class="label txt-nowrap pl10">{{ it.meta.label }}</span>
    </div>
  </div>
</template>
<script>
export default {
  inheritAttrs: false,
  name: "Tabbar",
  components: {
    WinIcon: () => import("./chip/WinIcon.vue"),
  },
  computed: {
    windows() {
      return this.$store.state.desk.windows
    },
    acwindow() {
      return this.$store.state.desk.acwindow
    },
    hoverViewTime() {
      return this.$store.state.desk.tabbar.hoverViewTime
    },
  },
  data() {
    return {
      timer: "",
    }
  },
  methods: {
    toggleShow(app) {
      let { active, status } = app.attrs
      if (active) {
        //已激活，去最小化
        this.$store.dispatch("desk/hideWindow", app)
      } else {
        //未激活
        if (status === "mini") {
          //是最小化，去展示
          this.$store.dispatch("desk/showWindow", app)
        } else {
          //非最小化，去激活
          this.$store.dispatch("desk/activeWindow", app)
        }
      }
    },
    showRmenu(aim) {
      const that = this
      const btn = [
        {
          icon: "",
          label: "Tabbar",
          cb() {},
        },
      ]
      this.$store.commit("desk/saveRmenu", { aim, btn })
    },
    showTabRmenu(aim, app) {
      const that = this
      let { type, icon, label } = app.meta
      console.info(type, icon, label)
      const btn = [
        {
          label,
          icon: icon || type,
          cb() {
            that.toggleShow(app)
          },
        },
        {
          icon: "close",
          label: "关闭",
          cb() {
            that.$store.dispatch("desk/closeWindow", app)
          },
        },
      ]
      this.$store.commit("desk/saveRmenu", { aim, btn })
    },
    // toActiveWindow(app) {
    //   this.$store.dispatch("desk/changeWindow", {
    //     app,
    //     status: app.attrs.ostatus,
    //   })
    // },
    hoverPage(app) {
      this.timer = this.$setTimeout(
        () => {
          const { id, status } = app.attrs
          const el = document.getElementById(id)
          const hovered = el.classList.contains("hover")
          if (hovered) {
            return
          }
          const actived = el.classList.contains("active")
          if (!actived) {
            el.classList.add(status + "_hover")
          }
        },
        this.hoverViewTime,
        this.timer
      )
    },
    cancelHoverPage(app) {
      clearTimeout(this.timer)
      const { id, status } = app.attrs
      const el = document.getElementById(id)
      const cls = status+"_hover"
      const hovered = el.classList.contains(cls)
      if (hovered) {
        el.classList.remove(cls)
      }
    },
  },
}
</script>
<style lang="scss" scoped>
.Tabbar {
  height: 3rem;
  position: absolute;
  bottom: 0;
  left: 50%;
  z-index: 9;
  padding: 0 8rem;
  transform: translateX(-50%);
  background-image: linear-gradient(
    to right,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.3) 50%,
    rgba(0, 0, 0, 0) 100%
  );
  .tabbar {
    margin-right: $dis10;
    width: 120px;
    position: relative;
    transition: $trans1;
    &::after {
      content: "";
      left: 0;
      right: 0;
      bottom: 0;
      height: 3px;
      position: absolute;
      background-color: rgba(255, 255, 255, 0.5);
    }
    &.active {
      background-color: $white2;
      backdrop-filter: saturate(150%) blur(4px);
    }
    &:hover {
      background-color: $white1;
      backdrop-filter: saturate(150%) blur(4px);
    }
  }
  .label {
    font-size: 12px;
    color: #fff;
    text-shadow: #333 0 1px 2px, #333 0 -1px 2px;
  }
}
</style>
